<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
  <title>{{g.title}}</title>
  <link rel="stylesheet" type="text/css" href="/static/css/site.css?date={{g.version}}">
  <link rel="stylesheet" type="text/css" href="/static/css/login.css?date={{g.version}}">
  <script type="text/javascript">
    function IEVersion() {
      // 取得浏览器的userAgent字符串
      var userAgent = navigator.userAgent;
      // 判断是否为小于IE11的浏览器
      var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
      // 判断是否为IE的Edge浏览器
      var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
      // 判断是否为IE11浏览器
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
      if (isLessIE11) {
        var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
        // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
        IEReg.test(userAgent);
        // 取正则表达式中第一个小括号里匹配到的值
        var IEVersionNum = parseFloat(RegExp['$1']);
        if (IEVersionNum === 7) { // IE7
          return 7
        } else if (IEVersionNum === 8) { // IE8
          return 8
        } else if (IEVersionNum === 9) { // IE9
          return 9
        } else if (IEVersionNum === 10) { // IE10
          return 10
        } else { // IE版本<7
          return 6
        }
      } else if (isEdge) { // edge

        return 'edge'
      } else if (isIE11) { // IE11
        return 11
      } else { // 不是ie浏览器
        return -1
      }
    }
    if (IEVersion() > -1 && IEVersion() < 9) {
      window.location.href = '/tips';
    }
  </script>
</head>

<body>
  <div class="main">
    <div class="login">
      <div class="account">
        <form class="loginform" method="post" action="/login" onsubmit="return false;">
          <div class="rlogo">{{g.title}}</div>
          <div class="line"><input class="inputtxt" value="" name="username" datatype="*"
              nullmsg="{{data['lan']['N1']}}" errormsg="{{data['lan']['N2']}}" placeholder="{{data['lan']['N3']}}"
              type="text">
            <div class="Validform_checktip"></div>
          </div>
          <div class="line"><input class="inputtxt" name="password" value="" datatype="*"
              nullmsg="{{data['lan']['N4']}}" errormsg="{{data['lan']['N5']}}" placeholder="{{data['lan']['N6']}}"
              type="password">
            <div class="Validform_checktip"></div>
          </div>
          <div style="color: red;position: relative;top: -14px;" id="errorStr"></div>
          <div class="line yzm" style="top: -5px;{% if not session['code'] %}display:none;{% endif %}">
            <input type="text" class="inputtxt" name="code" nullmsg="{{data['lan']['N7']}}"
              errormsg="{{data['lan']['N8']}}" datatype="*" placeholder="{{data['lan']['N9']}}">
            <div class="Validform_checktip"></div>
            <img width="100" height="40" class="passcode"
              onClick="this.src=this.src.split('?')[0] + '?'+new Date().getTime()" src="/code"
              style="border: 1px solid #ccc; float: right;" title="{{data['lan']['N10']}}">
          </div>
          <div class="login_btn"><input id="login-button" value="{{data['lan']['N11']}}" type="submit"></div>
          <p class="pwinfo" style="display:none">{{data['lan']['N12']}}</p>
          {% if data['hosts'] != '[]' %}
          <a class="static-cdn">
            <span class="span-tname">加速节点</span>
            <select name="cdn_url" id="static_cdn">
              <option value="localhost">计算中...</option>
            </select>
          </a>
          {% endif %}
          <a class="resetpw" href="https://forum.aapanel.com/d/16-how-to-reset-password-for-aapanel-linux-6-x"
            target="_blank">{{data['lan']['N13']}}</a>
        </form>
      </div>
      <div class="scanCode" style="display: none;">
        <div class="titles"><span>{{data['lan']['QR_CORE_LOGIN']}}</span></div>
        <div class="qrCode" id="qrcode"></div>
        <div class="scanTip">
          <div class="list_scan">
            <img src="/static/img/sCan.png" - />
            <span>{{data['lan']['SCAN_LOGIN']}}</span>
            <span><a href="https://forum.aapanel.com/d/3527-aapanel-mobile" class="btlink"
                target="_blank">{{data['lan']['BT_SMALL_P']}}</a></span>
          </div>
        </div>
      </div>
      <div class="entrance" style="display: none;">
        <div class="bg_img"></div>
        <div class="tips">
          <span><img src="/static/img/safety_ico.png"><span>{{data['lan']['SCAN_MORE_SAFETY']}}</span></span>
          <em></em>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="/static/language/zh-cn.js"></script>
  <script type="text/javascript" src="/static/layer/layer.js"></script>
  <script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
  <script type="text/javascript" src="/static/js/Validform_v5.3.2_min.js"></script>
  <script type="text/javascript" src="/static/js/md5.js"></script>
  <script type="text/javascript">
    $(function () {
      function Wreset() {
        var w = $(window).width();
        var yzmw = $(".login .line").width() - 140;
        if ($(".yzm").is(":visible") && w > 640) {
          $(".login").css({
            "height": "365px",
            "margin-top": "-230px"
          });
        } else {
          $(".login").removeAttr("style")
        }
        $(".login .yzm .inputtxt").width(yzmw);
      }
      Wreset();
      var setTime = '';
      $.get('/public?name=app&fun=login_qrcode', function (res) {
        $('#qrcode').qrcode({
          render: "canvas",
          width: 150,
          height: 150,
          background: "#fefefe",
          foreground: "#333",
          text: res.status ? res.msg : 'https://aapanel.com/download/app.html'
        });
        $('.entrance').show();
      }).error(function (res, textStatus, errorThrown) {
        if (res.status == 404) {
          $('.entrance').hide();
        }
      });

      function controlTime() {
        $.get('/public?name=app&fun=is_scan_ok', function (res) {
          if (res.status) {
            layer.msg('扫码成功，等待中...', {
              icon: 1
            });
            clearInterval(setTime);
            loginAdmin(res.msg);
          }
        });
      }

      function loginAdmin(key) {
        $.get('/public?name=app&fun=set_login', {
          secret_key: key
        }, function (res) {
          layer.msg(res.msg, {
            icon: res.status ? 1 : 2
          })
          if (res.status) {
            layer.msg('Secure login in progress,waiting...', {
              time: 0,
              shade: [0.4, '#fff'],
              icon: 16
            });
            setTimeout(function () {
              location.href = '/';
            }, 1000);
          }
        });
      }
      $(".loginform").Validform({
        tiptype: function (msg, o, cssctl) {
          if (!o.obj.is("form")) {
            var objtip = o.obj.siblings(".Validform_checktip");
            cssctl(objtip, o.type);
            objtip.text(msg);
          }
        }
      });
      $('.bg_img').click(function (event) {
        if ($(this).hasClass('pc')) {
          $(this).removeClass('pc');
          $('.scanCode').hide().prev().show();
          clearInterval(setTime);
          $('.tips>span').html('<img src="/static/img/scan_ico.png"><span>切换扫码登录</span>');
        } else {
          $(this).addClass('pc');
          $('.account').hide().next().show();
          $('.tips>span').html('<img src="/static/img/safety_ico.png"><span>切换账号登录</span>')
          setTime = window.setInterval(controlTime, 2000);
        }
      });
      $('#login-button').click(function () {
        var username = $("input[name='username']").val().trim();
        var password = $("input[name='password']").val().trim();
        var code = $("input[name='code']").val().trim();

        if (username == '' || password == '') {
          layer.msg("{{data['lan']['JS1']}}", {
            icon: 2
          });
          return;
        }

        var data = {
          username: md5(username),
          password: md5(md5(password) + '' + '_bt.cn'),
          code: code,
          cdn_url: $("#static_cdn").val()
        }
        var loadT = layer.msg("{{data['lan']['JS2']}}", {
          icon: 16,
          time: 0,
          shade: [0.3, '#000']
        });
        $.post('/login', data, function (rdata) {
          if (rdata == '1') {
            layer.close(loadT);
            layer.open({
              type: 1,
              title: false,
              area: ['350px', '265px'],
              content: '<div class="verification_view">\
                                    <div class="v_title">Google authentication</div>\
                                    <div class="v_input"><input type="text" class="v_code" name="v_code" placeholder="Verification code"/></div>\
                                    <div class="v_btn"><input id="auth_verif_btn" value="Log in" type="submit"></div>\
                                    <div class="v_tips">* 请使用 Google Authenticator 应用获取验证码<br><a target="_blank" href="https://forum.aapanel.com/d/357-how-to-use-google-authenticator-in-the-aapanel"  class="btlink">Unable to verify, click Help</a></div>\
                                </div>',
              success: function () {
                // 点击验证登录
                $('[name="v_code"]').keyup(function (e) {
                  if (e.keyCode == 13) {
                    $('#auth_verif_btn').click();
                  }
                });
                $('#auth_verif_btn').click(function (e) {
                  data['vcode'] = $('[name="v_code"]').val().trim();
                  var loadT = layer.msg("{{data['lan']['JS2']}}", {
                    icon: 16,
                    time: 0,
                    shade: [0.3, '#000']
                  });
                  $.post('/login', data, function (rdata) {
                    layer.close(loadT);
                    if (!rdata.status) {
                      layer.msg(rdata.msg, {
                        icon: 2
                      });
                      return false;
                    }
                    layer.msg(rdata.msg, {
                      icon: 16,
                      time: 0,
                      shade: [0.3, '#000']
                    });
                    window.location.href = '/';
                  });
                });
              }
            });
            return false;
          }
          layer.close(loadT);
          if (!rdata.status) {
            $("#errorStr").html(rdata.msg);
            $("input[name='password']").val('');
            num = rdata.msg.substring(rdata.msg.indexOf('[') + 1, rdata.msg.indexOf(']'))
            if (num < 5) {
              $(".yzm").show();
              $(".login").css("height", "332px");
              $("input[name='code']").val('');
            }
            $(".yzm").show();
            Wreset();
            $(".passcode").click();
            layer.msg(rdata.msg, {
              icon: 2
            });
            return;
          }

          layer.msg(rdata.msg, {
            icon: 16,
            time: 0,
            shade: [0.3, '#000']
          });
          window.location.href = '/';
        });
      });
      if ("{{data['app_login']}}" == 'True') {
        $('.bg_img').addClass('pc');
        $('.account').hide().next().show();
        $('.tips>span').html('<img src="/static/img/safety_ico.png"><span>切换账号登录</span>')
        setTime = window.setInterval(controlTime, 2000);
      }
      $(window).on('resize', function () {
        Wreset();
      })
    })

    if (typeof (String.prototype.trim) === "undefined") {
      String.prototype.trim = function () {
        return String(this).replace(/^\s+|\s+$/g, '');
      };
    }
  </script>
</body>

</html>